<template>
  <div class="menu-operations">
    <div class="l-btn-box">
      <el-button type="primary" @click="changeEdit">当前状态：{{ text }}</el-button>
      <el-button v-for="(item, index) in buttons" :key="'menu-operations-' + index" type="primary"
        @click="operationChang(item)">{{
        item }}</el-button>
    </div>
    <div class="r-btn-box">
      <el-button type="primary" @click="toRoute('/index')">返回大屏</el-button>
      <el-button type="primary" @click="toRoute('/workbench')">返回工作台</el-button>
      <el-button type="primary" @click="toRoute('/login')">切换用户</el-button>
    </div>
  </div>
</template>

<script setup>
import { Showroom3DStore } from "@/pinia/Showroom3D";
import { useRouter } from "vue-router";
const router = useRouter();
const s3Store = Showroom3DStore();
const mxBoxList = ref([]);
const buttonObj = ref([
  { name: '新增模型', action: 'add', type: 'edit' },
  { name: '删除模型', action: 'delete', type: 'edit' },
  { name: '保存模型', action: 'save', type: 'edit' },
  { name: '加载模型', action: 'load', type: 'edit' },
  { name: '切换项目', action: 'switchProjec', type: 'edit,preview' },
  { name: '切换场景', action: 'switchScene', type: 'edit,preview' },
  { name: '操作模型', action: 'edit', type: 'edit' },
])
const buttons = ref(['新增模型', '删除模型', '保存模型', '加载模型', '切换项目', '切换场景', '操作模型'])

const text = computed(() => {
  if (s3Store.editStatus) {
    buttons.value = ['新增模型', '删除模型', '保存模型', '加载模型']
  } else {
    buttons.value = ['切换项目', '切换场景', '操作模型']
  }
  return s3Store.editStatus ? '编辑' : '预览'
})

// 状态切换
const changeEdit = () => {
  s3Store.setEditStatus()
  ElNotification({
    title: '操作提示:',
    message: `切换成功:${text.value}`,
    type: 'success',
    duration: 1500,
  })
}
const operationChang = (str) => {
  ElMessage({ message: str, type: 'success' })
  const btn = buttonObj.value.filter(item => item.name === str)
  if (btn.length) {
    s3Store.setOperationStatus(btn[0].action)
  }
  setTimeout(() => { s3Store.setOperationStatus('') }, 500);
}
const toRoute = (path) => {
  if (s3Store.editStatus) {
    ElNotification({ title: '系统提示:', message: `请先保存编辑内容`, type: 'warning', duration: 1500 })
  } else {
    router.push(path)
  }
}
</script>
<style scoped>
.menu-operations {
  background-color: #212121;
  padding: 1.5rem 1rem;
  z-index: 10;
  display: flex;
  justify-content: space-between;
}
</style>